<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" src="js/template-web.js"></script>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/html" id="classesListTemplate">
    {{each classesList classes index}}
    <option value="{{classes.id}}">{{classes.cName}}</option>
    {{/each}}
</script>
<script type="text/javascript">

    function GetRequest() {
        var url = location.search; //获取url中"?"符后的字串
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for ( var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }
    var Request=undefined;
    Request=GetRequest();
    var id=Request["id"];

    $(function () {
        $.post("../getClasses", function (data) {
            var classesListhtml = template("classesListTemplate", {classesList: data});
            $("#classes").html(classesListhtml)
        })
        $(function () {
            $.post("../getStudent", {id: id}, function (data) {
                $("#sName").val(data.sName);
                if (data.gender == "男") {
                    $("#nan").attr("checked","checked");
                }else {
                    $("#nv").attr("checked","checked");
                }
                $("#birthday").val(data.birthday);
                $("#telephone").val(data.telephone);
                $("#email").val(data.email);
                var classId = data.classId;
                $("option[value=classId]").attr("select","select");
            }, "json")
        })
    })
    function back() {
        window.location = "index.html";
    }
    function save() {
        var sName = $("input[id=sName]").val();
        if(sName==undefined && sName==""){
            alert("姓名不能为空");
            return;
        }
        var gender = $("input[type=radio]:checked").val();
        if(gender==undefined && gender==""){
            alert("性别不能为空");
            return;
        }
        var birthday = $("input[id=birthday]").val();
        if(birthday==undefined && birthday==""){
            alert("生日不能为空");
            return;
        }
        var telephone = $("input[id=telephone]").val();
        if(telephone==undefined && telephone==""){
            alert("电话不能为空");
            return;
        }
        var email = $("input[id=email]").val();
        if(email==undefined && email==""){
            alert("E-mail不能为空");
            return;
        }
        var classId = $("#classes").val();
        alert(classId)
        $.post("../modify",{id:id,sName:sName,gender:gender,birthday:birthday,telephone:telephone,email:email,classId:classId},function (data) {
            if(data.code==0){
                alert("修改成功");
                window.location = "index.html";
            }else{
                alert("请输入正确信息");
            }
        })
    }



</script>
<body>
<h2 style="text-align: center">修改学员信息</h2>
<center>
    <table>
        <tbody>
        <tr>
            <td>姓名</td>
            <td>
                <input type="text" id="sName">
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <label>性别：</label>
                <label class="radio">
                    <input type="radio" name="status" value="男" id="nan" >
                    男
                </label>
                <label class="radio">
                    <input type="radio" name="status" value="女" id="nv" >
                    女
                </label>
            </td>
        </tr>
        <tr>
            <td>生日</td>
            <td>
                <input type="text" id="birthday">
            </td>
        </tr>
        <tr>
            <td>电话</td>
            <td>
                <input type="text" id="telephone">
            </td>
        </tr>
        <tr>
            <td>E-mail</td>
            <td>
                <input type="text" id="email">
            </td>
        </tr>
        <tr>
            <td>班级</td>
            <td>
                <select id="classes">

                </select>
            </td>
        </tr>
        <tr>
            <td>
                <button id="save" onclick="save()">保存</button>
            </td>
            <td>
                <button id="back" onclick="back()">取消</button>
            </td>
        </tr>
        </tbody>
    </table>
</center>
</body>
</html>